<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Freude Xu
 * @LastEditTime: 2021-09-22 16:46:58
-->
<template>
  <div ref="root" style="height: 130px"></div>
</template>

<script>
  import {
    Gauge
  } from "@antv/g2plot";
  export default {
    data() {
      return {
        percent: 0,
      };
    },
    mounted() {
      this.initCharts();
    },
    methods: {
      initCharts() {
        const ticks = [0, 1 / 3, 2 / 3, 1];
        const color = ['#F4664A', '#FAAD14', '#30BF78'];
        let gauge = new Gauge(this.$refs["root"], {
          percent: this.percent,
          type: 'meter',
          innerRadius: 0.75,
          range: {
            ticks: [0, 1 / 3, 2 / 3, 1],
            color: ['#F4664A', '#FAAD14', '#30BF78'],
          },
          indicator: {
            pointer: {
              style: {
                stroke: '#D0D0D0',
              },
            },
            pin: {
              style: {
                stroke: '#D0D0D0',
              },
            },
          },
          statistic: {
            title: {
              formatter: ({
                percent
              }) => {
                if (percent < ticks[1]) {
                  return '差';
                }
                if (percent < ticks[2]) {
                  return '中';
                }
                return '优';
              },
              style: ({
                percent
              }) => {
                return {
                  fontSize: '18px',
                  lineHeight: 1,
                  color: percent < ticks[1] ? color[0] : percent < ticks[2] ? color[1] : color[2],
                };
              },
            },
            content: {
              offsetY: 36,
              style: {
                fontSize: '20px',
                color: '#4B535E',
              },
              formatter: () => '系统表现',
            },
          },
        });
        gauge.render();
        //间歇调用
        setInterval(() => {
          if (this.percent < 0.75) {
            this.percent += 0.01;
            gauge.changeData(this.percent);
          } else {
            this.percent = 0.75;
          }
        }, 100);
      },
    },
  };
</script>